<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>三元运算符</title>
</head>

<body>
    <h1>三元运算符</h1>
    <p>根据props的type参数，来生成同的标签</p>
    <ul>
        <li>1：p标签</li>
        <li>2：div标签</li>
        <li>3：span标签</li>
        <li>其余：section标签</li>
    </ul>
    <ol>
    </ol>
    <hr />
    <div id="demoReact"></div>
</body>
<script src="../../node_modules/babel-standalone/babel.min.js"></script>
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">

    class MyCom extends React.Component {

        constructor(props) {
            super(props)
        }

        render() {
            return (
                <div>
                    {
                        this.props.type == 1 ? 
                        <p>我是p标签</p>
                        : this.props.type == 2 ?
                        <div>我是div标签</div>
                        : this.props.type == 3 ?
                        <span>我是span标签</span>
                        : <section>我是section标签</section>
                    }
                </div>
            )
        }
    }

    let com = (
        <div>
            <MyCom type="1" />
            <MyCom type="2" />
            <MyCom type="3" />
            <MyCom type="4" />
        </div>
    )

    // 创建根节点
    let root = ReactDOM.createRoot(document.getElementById("demoReact"));

    // 渲染组件
    root.render(com);
</script>

</html>